AngularJS Routing
ngRoute মডিউল আপনাকে আপনার অ্যাপ্লিকেশনটিকে একটি একক পৃষ্ঠার অ্যাপ্লিকেশনে রূপান্তর করতে সহায়তা করে।
AngularJS এ রাউটিং কি?
আপনি যদি আপনার অ্যাপের বিভিন্ন পৃষ্ঠায় নেভিগেট করতে চান, কিন্তু পৃষ্ঠাটি পুনরায় লোড না করে অ্যাপটিকে একটি SPA (একক পৃষ্ঠা অ্যাপ্লিকেশন) হতে চান, আপনি ngRoute মডিউল ব্যবহার করতে পারেন।
ngRoute মডিউল সম্পূর্ণ অ্যাপটি পুনরায় লোড না করেই আপনার অ্যাপটিকে বিভিন্ন পৃষ্ঠায় পুনঃনির্দেশ করে।
উদাহরণ:
"red.htm", "green.htm", এবং "blue.htm"-এ নেভিগেট করুন:
<body ng-app="myApp"> <p><a href="#/!">বাড়ি</a></p>৷ <a href="#!red">লাল</a>৷ <a href="#!green">সবুজ</a>৷ <a href="#!blue">নীল</a>৷ <div ng-view></div> <script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { টেমপ্লেটইউআরএল : "main.htm" }) .when("/লাল", { টেমপ্লেটইউআরএল : "red.htm" }) .when("/সবুজ", { টেমপ্লেটইউআরএল : "green.htm" }) .when("/নীল", { টেমপ্লেটইউআরএল : "blue.htm" }); }); </script> </body>আমার কি দরকার?
রাউটিং এর জন্য আপনার অ্যাপ্লিকেশন প্রস্তুত করতে, আপনাকে AngularJS রুট মডিউল যোগ করতে হবে:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>তারপরে আপনাকে অ্যাপ্লিকেশন মডিউলে প্রক্সি হিসাবে ngRoute যোগ করতে হবে:
var app = angular.module("myApp", ["ngRoute"]);এখন আপনার অ্যাপ্লিকেশনের রুট মডিউলে অ্যাক্সেস রয়েছে, যা $routeProvider প্রদান করে।
আপনার অ্যাপ্লিকেশনে বিভিন্ন রুট কনফিগার করতে $routeProvider ব্যবহার করুন:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});এটা কোথায় যায়?
রাউটিং দ্বারা পরিবেশিত বিষয়বস্তু ধরে রাখতে আপনার অ্যাপ্লিকেশনটির একটি ধারক প্রয়োজন৷
এই ধারকটি হল এনজি-ভিউ নির্দেশিকা।
আপনার অ্যাপ্লিকেশনে এনজি-ভিউ নির্দেশিকা যোগ করার তিনটি ভিন্ন উপায় রয়েছে:
উদাহরণ 1:
<div ng-view></div>উদাহরণ 2:
<ng-view></ng-view>উদাহরণ 3:
<div class="ng-view"></div>গুরুত্বপূর্ণ নোট:
অ্যাপ্লিকেশনগুলিতে শুধুমাত্র একটি এনজি-ভিউ নির্দেশিকা থাকতে পারে এবং এটি রুট দ্বারা পরিবেশিত সমস্ত দর্শনের জন্য একটি স্থানধারক হিসাবে কাজ করে৷
$routeProvider
$routeProvider-এর সাহায্যে, কোনো ব্যবহারকারী কোনো লিঙ্কে ক্লিক করলে কোন পৃষ্ঠাটি প্রদর্শন করা হবে তা আপনি নির্ধারণ করতে পারেন।
উদাহরণ:
$routeProvider সংজ্ঞায়িত করুন:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});আপনার অ্যাপ্লিকেশনের কনফিগার পদ্ধতি ব্যবহার করে $routeProvider সংজ্ঞায়িত করুন।
কনফিগার পদ্ধতিতে নিবন্ধিত কাজটি প্রয়োগ করা হয় যখন অ্যাপ্লিকেশনটি লোড করা হয়।
কন্ট্রোলার
$routeProvider দিয়ে, আপনি প্রতিটি "ভিউ" এর জন্য একটি নিয়ামক সংজ্ঞায়িত করতে পারেন।
উদাহরণ:
কন্ট্রোলার যোগ করুন:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { টেমপ্লেটইউআরএল : "main.htm" }) .when("/london", { টেমপ্লেটইউআরএল : "london.htm", কন্ট্রোলার: "londonCtrl" }) .when("/ paris", { টেমপ্লেটইউআরএল : "paris.htm", নিয়ামক: "parisCtrl" }); }); app.controller("londonCtrl", ফাংশন ($স্কোপ) { $scope.msg = "আমি লন্ডন ভালোবাসি"; }); app.controller("parisCtrl", ফাংশন ($স্কোপ) { $scope.msg = "আমি প্যারিস ভালোবাসি"; });"london.htm" এবং "paris.htm" হল সাধারণ HTML ফাইল যেখানে আপনি AngularJS এক্সপ্রেশন যোগ করতে পারেন ঠিক আপনার AngularJS অ্যাপ্লিকেশনের অন্য HTML অংশের মতো।
ফাইল এই মত দেখায়:
london.htm
<h1>লন্ডন</h1> <h3>লন্ডন ইংল্যান্ডের রাজধানী।</h3> <p>13 মিলিয়নেরও বেশি লোকের একটি মেট্রোপলিটন এলাকা সহ এটি যুক্তরাজ্যের সবচেয়ে জনবহুল শহর।</p> <p>{{msg}}</p>paris.htm
<h1>প্যারিস</h1> <h3>প্যারিস ফ্রান্সের রাজধানী।</h3> <p>প্যারিস অঞ্চলটি ইউরোপের বৃহত্তম জনসংখ্যা কেন্দ্রগুলির মধ্যে একটি, যেখানে 12 মিলিয়নেরও বেশি বাসিন্দা রয়েছে৷</p> <p>{{msg}}</p>টেমপ্লেট
আগের উদাহরণগুলিতে আমরা $routeProvider.when পদ্ধতিতে টেমপ্লেটইউআরএল অ্যাট্রিবিউট ব্যবহার করেছি।
আপনি টেমপ্লেট অ্যাট্রিবিউটও ব্যবহার করতে পারেন, যা আপনাকে অ্যাট্রিবিউটের মানটিতে সরাসরি এইচটিএমএল লিখতে দেয় এবং কোনও পৃষ্ঠার উল্লেখ না করে।
উদাহরণ:
টেমপ্লেট লিখুন:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { টেমপ্লেট : "<h1>হোম</h1><p>এই বিষয়বস্তু পরিবর্তন করতে লিঙ্কগুলিতে ক্লিক করুন</p>" }) .when("/কলা", { টেমপ্লেট : "<h1>কলা</h1><p>কলায় প্রায় 75% জল থাকে৷</p>" }) .when("/টমেটো", { টেমপ্লেট : "<h1>টমেটো</h1><p>টমেটোতে প্রায় 95% জল।</p>" }); });পার্থক্য:
templateUrl: একটি বহিরাগত HTML ফাইলের দিকে নির্দেশ করে
টেমপ্লেট: সরাসরি HTML বিষয়বস্তু রয়েছে
অন্যথায় পদ্ধতি
পূর্ববর্তী উদাহরণে আমরা $routeProvider এর when পদ্ধতি ব্যবহার করেছি।
আপনি অন্যথায় পদ্ধতিটিও ব্যবহার করতে পারেন, যা অন্যগুলি প্রযোজ্য না হলে ডিফল্ট পদ্ধতি।
উদাহরণ:
যদি "কলা" বা "টমেটো" লিঙ্কে ক্লিক না করা হয়, তাহলে তাদের জানান:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/কলা", { টেমপ্লেট : "<h1>কলা</h1><p>কলায় প্রায় 75% জল থাকে৷</p>" }) .when("/টমেটো", { টেমপ্লেট : "<h1>টমেটো</h1><p>টমেটোতে প্রায় 95% জল।</p>" }) অন্যথায়({ টেমপ্লেট : "<h1>কোনটিই নয়</h1><p>কেউ নির্বাচিত হয়নি</p>" }); });নিরাপত্তা:
অন্যথায় অ-পদ্ধতি রুট পরিচালনা করতে ব্যবহৃত হয়। ব্যবহারকারী একটি অবৈধ URL এ প্রবেশ করলে এটি ত্রুটি পৃষ্ঠাগুলি প্রদর্শন করতে সহায়তা করে৷
নিখুঁত উদাহরণ
<!DOCTYPE html> <html> <মাথা> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script> </head> <body ng-app="myApp"> <nav> <a href="#!/">হোম</a>৷ <a href="#!london">লন্ডন</a>৷ <a href="#!paris">প্যারিস</a>৷ <a href="#!tokyo">টোকিও</a>৷ </nav> <div ng-view></div> <script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { টেমপ্লেট : "<h1>বাড়ি</h1><p>একটি শহর নির্বাচন করুন</p>" }) .when("/london", { টেমপ্লেটইউআরএল : "london.htm", কন্ট্রোলার: "londonCtrl" }) .when("/ paris", { টেমপ্লেটইউআরএল : "paris.htm", নিয়ামক: "parisCtrl" }) .when("/tokyo", { টেমপ্লেট : "<h1>টোকিও</h1><p>টোকিও হল জাপানের রাজধানী৷</p>" }) অন্যথায়({ টেমপ্লেট : "<h1>পৃষ্ঠা পাওয়া যায়নি</h1><p>404 ত্রুটি - পৃষ্ঠাটি পাওয়া যায়নি</p>" }); }); app.controller("londonCtrl", ফাংশন ($স্কোপ) { $scope.msg = "লন্ডন সম্পর্কে আরো তথ্য"; }); app.controller("parisCtrl", ফাংশন ($স্কোপ) { $scope.msg = "প্যারিস সম্পর্কে আরো তথ্য"; }); </script> </body> </html>অনুশীলন করুন
নীচের টিউটোরিয়ালে অ্যাঙ্গুলারজেএস রাউটিং সম্পর্কে আপনার বোঝার পরীক্ষা করুন:
AngularJS রাউটিং টিউটোরিয়াল
সর্বোত্তম অনুশীলন
# লিঙ্কের জন্য! ব্যবহার করুন
# AngularJS রাউটিং লিঙ্কের জন্য! (হ্যাশব্যাং) ব্যবহার করুন, এটি সার্চ ইঞ্জিন অপ্টিমাইজেশানে সাহায্য করে।
অন্যথায়() পদ্ধতি ব্যবহার করুন
অমিল রুটগুলি পরিচালনা করতে অন্যথায়() পদ্ধতি ব্যবহার করুন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
ভারী টেমপ্লেট এড়িয়ে চলুন
সরাসরি HTML সহ বড় টেমপ্লেট এড়িয়ে চলুন - পরিবর্তে templateUrl সহ বহিরাগত ফাইলগুলি ব্যবহার করুন৷
মডুলার আর্কিটেকচার ব্যবহার করুন
বড় অ্যাপ্লিকেশনের জন্য, কন্ট্রোলার এবং টেমপ্লেটগুলিকে আলাদা ফাইল হিসাবে রাখুন৷